<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.css">
    <script type="text/javascript" src="javascripts/bootstrap.js"></script>
    <style>
        #inputRandom{
            width: 55%;
        }
        .fontSize15 {
            font-size: 15pt;
        }

        .fontSize18{
            font-size:18pt;
        }
        .fontSize20 {
            font-size: 20pt;
        }

        .fontSize30 {
            font-size: 30pt;
        }

        .fontSize50 {
            font-size: 50pt;
        }

        .colorWhite {
            color: white;
        }
        .homeText:hover{cursor: pointer}
        .regDiv{background-color: rgba(255,255,255,0.4);}
        .adminDiv{background-color: rgba(255,255,255,0.6);padding-top: 10px;padding-bottom: 10px;text-align: center;border-radius: 5px 6px 7px 8px;}

    </style>
    <SCRIPT LANGUAGE="JavaScript">
        function createCode(len)
        {
            var seed = new Array(
                    'abcdefghijklmnopqrstuvwxyz',
                    'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                    '0123456789'
            );               //创建需要的数据数组
            var idx,i;
            var result = '';   //返回的结果变量
            for (i=0; i<len; i++) //根据指定的长度
            {
                idx = Math.floor(Math.random()*3); //获得随机数据的整数部分-获取一个随机整数
                result += seed[idx].substr(Math.floor(Math.random()*(seed[idx].length)), 1);//根据随机数获取数据中一个值
            }
            return result; //返回随机结果
        }

        function test() {
            var inputRandom=document.getElementById("inputRandom").value;
            var autoRandom=document.getElementById("autoRandom").innerHTML;
            if(inputRandom==autoRandom) {
                alert("通过验证");
            } else {
                alert("验证码错误");
            }

        }
    </SCRIPT>
</head>
<body background="images/bg-blueSky.jpg">
<nav class="navbar navbar-inverse">
    <div id="navbar" class="navbar-collapse collapse">
        <!--<ul class="nav navbar-nav">-->
        <!--<li class="active"><a href="#">Home</a></li>-->
        <!--<li><a href="#about">About</a></li>-->
        <!--<li><a href="#contact">Contact</a></li>-->
        <!--<li class="dropdown">-->
        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"-->
        <!--aria-expanded="false">Dropdown <span class="caret"></span></a>-->
        <!--<ul class="dropdown-menu" role="menu">-->
        <!--<li><a href="#">Action</a></li>-->
        <!--<li><a href="#">Another action</a></li>-->
        <!--<li class="divider"></li>-->
        <!--<li class="dropdown-header">Nav header</li>-->
        <!--<li><a href="#">Separated link</a></li>-->
        <!--</ul>-->
        <!--</li>-->
        <!--</ul>-->
        <span class="fontSize30 colorWhite homeText" onclick="location.href='#'">&nbsp;LOGO&nbsp;&nbsp;&nbsp;邀约管理系统</span>
    </div>
    <!--/.nav-collapse -->
</nav>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12" style="height: 60px;text-align: center;padding-top: 40px;">
                    <!--<span class="fontSize50">-->
                    <!--邀约管理系统-->
                    <!--</span>-->
                </div>
            </div>
            <div class="row" id="container">

                <div class="col-md-4">
                </div>
                <!--<div class="col-md-4" style="background: url('images/2.png');">-->
                <div class="col-md-4 regDiv" >
                    <div class="row adminDiv" >
                        <span class="fontSize15">
                            欢迎注册，如果您已经注册。请在此<a href="login.html">登录</a>
                        </span>
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <form class="form-horizontal" role="form" action="#">
                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <label for="regName" class="col-sm-4 control-label">
                                    <span class="fontSize15">用户名&nbsp;&nbsp;&nbsp;:</span>
                                </label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="regName"  required oninvalid="setCustomValidity('请填写用户名！');" oninput="setCustomValidity('');"/>
                                </div>
                                <div class="col-sm-1"></div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <label for="regPassword" class="col-sm-4 control-label">
                                    <span class="fontSize15">密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;:</span>
                                </label>
                                <div class="col-sm-6">
                                    <input type="password" class="form-control" id="regPassword"  required oninvalid="setCustomValidity('请填写密码');" oninput="setCustomValidity('');"/>
                                </div>
                                <div class="col-sm-1"></div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <label for="checkPassword" class="col-sm-4 control-label">

                                    <span class="fontSize15">确认密码:</span>
                                </label>

                                <div class="col-sm-6"><input type="password" class="form-control" id="checkPassword"  required oninvalid="setCustomValidity('请验证密码');" oninput="setCustomValidity('');"/>
                                &nbsp;
                                </div>
                                <div class="col-sm-1"></div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <label for="regPhoneNumber" class="col-sm-4 control-label">
                                    <span class="fontSize15">手&nbsp;&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;:</span>
                                </label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="regPhoneNumber"/>
                                </div>
                                <div class="col-sm-1"></div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <label for="regEmail" class="col-sm-4 control-label">
                                    <span class="fontSize15">邮&nbsp;&nbsp;&nbsp;&nbsp;箱&nbsp;&nbsp;&nbsp;:</span>
                                </label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="regEmail"/>
                                </div>
                                <div class="col-sm-1"></div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-1"></div>
                                <label for="checkID" class="col-sm-4 control-label">
                                    <span class="fontSize15">验证码&nbsp;&nbsp;&nbsp;:</span>
                                </label>
                                <div class="col-sm-6">
                                    <table>
                                        <tr>
                                            <td><input type="text" class="form-control" id="inputRandom"  required oninvalid="setCustomValidity('请填写验证码');" oninput="setCustomValidity('');"></td>
                                            <td><label id="autoRandom" value=""></label></td>
                                        </tr>
                                        <tr>


                                            <td> <INPUT TYPE="button" VALUE="获取验证码" ONCLICK="autoRandom.innerHTML=createCode(4)"></td>
                                           <!-- <td><input type="button" value="验证" onclick="test()"></td>-->
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <script type="text/javascript">
                                window.onload()=autoRandom.innerHTML=createCode(sel.value);
                            </script>


                            <div class="form-group">
                                <div class="col-sm-2"></div>
                                <div class="col-sm-offset-2 col-sm-4">
                                    <button type="submit" class="btn btn-default" id="regButton">
                                        立即注册
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-2">

                </div>
            </div>
        </div>
    </div>
</div>
</body>







</html>